import React, {Fragment} from 'react';
import "@/css/workflow.less"
import "./index.less"
import Judge from "@/pages/WorkFlowDesigner/Node/Judge";
import Line from "@/pages/WorkFlowDesigner/Line";
import {APPROVAL_NODE_WIDTH} from "@/constant/Approval";
import YLine from "@/pages/WorkFlowDesigner/Line/YLine";
import ApprovalNode from "@/pages/WorkFlowDesigner/Node/ApprovalNode";
import VerticalLine from "@/pages/WorkFlowDesigner/Line/VerticalLine";


/**
 * 分支节点
 * 1.重难点,如何绘制分支线
 * 实现方法1:
 *  1. 创建一个父div 采用弹性盒子模型
 *  2. 创建N个子div平均分配父div
 *  3. 利用伪选择器before,在子div中央绘制一条竖线作为分支路径指示
 *  4. 显示父div上下边框
 *  4. 创建四个div将上下左右多余的div 横线遮盖住
 *  实现方法2
 *  0. 用antd的栅格暂时无法实现,可能是我参数设置考虑欠缺.
 *     1 antd 的栅格配合分割线[Divider]横向, 时间线[TimeLine]纵向 也可以实现不太灵活的解决方案,且该方案目前有比较大的局限性,后续还需要继续优化
 *     2. 采用Divider 无非就行希望利用分割线中的 div(className="ant-divider-horizontal")元素中css绘制的实线
 *     3. 同理采用TimeLine也是基于类似的解决方案,后续可以直接将对应div元素的布局设置抽取出来,以采用更加直观的方法
 *     但是很遗憾,该方法封底比较麻烦
 *
 *  实现方法3:
 *      利用flex布局轻松实现,以及将将div边框填满Context区域,就是一条线
 *
 */


export default React.memo(() => {

    return (
        <Fragment>
            <div className="col-flex-container flex-center" title="branch-node">
                <div className="row-flex-container flex-center">
                    {/*创建n型线条*/}
                    <Line vHeight={40} hWidth={APPROVAL_NODE_WIDTH + 22} border={2}/>
                </div>
                <div className="row-flex-container flex-center">
                    {/*    判断条件 先创建1个600px的盒子,然后在创建两个300的盒子    */}
                    <div className="row-flex-container flex-center" title="condition-node-box">
                        <div className="col-flex-container flex-center">
                            <Judge/>
                            <VerticalLine height={40} border={2}/>
                            {/*    添加审核节点*/}

                            <ApprovalNode/>
                        </div>
                        <div className="col-flex-container flex-center">

                            <Judge/>
                            <VerticalLine height={40} border={2}/>
                            {/*    添加审核节点   */}
                            <ApprovalNode/>
                        </div>

                    </div>
                </div>
                <div className="row-flex-container">
                    {/*    创建一个Y型线条 这个22跟审核节点的左右边距长度有关*/}
                    <YLine uh={0} uw={APPROVAL_NODE_WIDTH + 22} ih={40}/>
                </div>
                <div className="row-flex-container"></div>
                <div className="row-flex-container"></div>
            </div>

        </Fragment>
    )
})
